<template>
  <!-- 短信验证码登入 -->
  <div id="sms">
    <el-form-item label="手机号">
      <el-input
        v-model="phoneNumber"
        class="captcha phone"
        type="text"
      ></el-input>
      <span
        class="captcha-svg"
        style="
          color: #888;
          font-weight: bolder;
          user-select: none;
          text-decoration: underline;
        "
        @click="sendSms"
        >{{ msg }}
      </span>
    </el-form-item>

    <el-form-item label="验证码">
      <el-input v-model="code"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button class="submit" type="primary" @click="submit">提交</el-button>
    </el-form-item>

    <svg class="icon diannao" aria-hidden="true" @click="typeCommon">
      <use xlink:href="#icon-diannao"></use>
    </svg>
  </div>
</template>

<script>
import * as api from "@/api/users";

export default {
  props: {
    storageUserInfo: {
      type: Function,
      require: true,
    },
  },
  data() {
    return {
      msg: "点击发送验证码",
      interval: null,
      flag: true,
      phoneNumber: "",
      code: "",
    };
  },
  watch: {
    ruleForm: {
      handler(newVal) {
        // console.log("sms");
        this.$emit("syncLoginForm", newVal);
      },
      deep: true,
    },
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        let res = await api.getSmsCode(this.phoneNumber);
        console.log(res);
        if (res.data.state) {
          this.$message({
            message: `短信发送成功`,
            type: "success",
          });
        } else {
          this.$message.error(res.data.msg);
        }

        this.flag = false;
        let delay = 5;
        this.msg = `${delay}秒后发送验证码`;
        this.interval = setInterval(() => {
          delay--;

          if (delay < 1) {
            clearInterval(this.interval);
            this.msg = "点击发送验证码";
            this.flag = true;
          } else {
            this.msg = `${delay}秒后发送验证码`;
          }
        }, 1000);
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      // console.log(res);
      let { state } = res.data;
      if (state) {
        this.$router.push("/")
      }
      this.storageUserInfo(res.data);
    },
    typeCommon() {
      this.$emit("typeCommon");
    },
  },
};
</script>
<style lang="less" scoped>
// .icon {
//   width: 1em;
//   height: 1em;
//   vertical-align: -0.15em;
//   fill: currentColor;
//   overflow: hidden;
// }
.diannao {
  font-size: 80px;
  color: #ccc;
  position: absolute;
  right: -4px;
  top: -10px;
  opacity: 0.7;
  cursor: pointer;
  // background-color: red;
}
.el-form-item .submit {
  width: 300px;
  background-image: linear-gradient(to right, red, green);
}

/deep/.el-input__inner {
  width: 300px;
}
/deep/.captcha .el-input__inner {
  width: 150px;
  vertical-align: middle;
  border-radius: 5px 0 0 5px;
  border: 0;
}
/deep/.captcha.phone {
  width: 150px;
}

.captcha-svg {
  width: 150px;
  height: 40px;
  background-color: #fff;
  display: inline-block;
  border-radius: 0 5px 5px 0;
  text-align: center;
  vertical-align: middle;
}
/deep/.el-form-item__label {
  color: #fff;
}
</style>